<style lang="sass" scoped>
    table {
  border-spacing: 0;
  border-collapse: collapse;
}
table {
  background-color: transparent;
}
    .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px !important;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
.table_color{
	.tr_default{
		font-size:12px;
		th{
			border-bottom:none;
		}
	}
	.tr_danger{
		font-size:12px;
		background: #dc4e4a;
		border:solid 1px #dc4e4a;
		color:#fff;
		th{
			border-bottom:none;
		}
		th,td{
			border:solid 1px #f2dede;
		}
	}
	.tr_warning{
		font-size:12px;
		background: #f0ad4e;
		border:solid 1px #f0ad4e;
		color:#fff;
		th{
			border-bottom:none;
		}
		th,td{
			border:solid 1px #f2dede;
		}
	}
	.tr_success{
		font-size:12px;
		background: #449d44;
		border:solid 1px #449d44;
		color:#fff;
		th{
			border-bottom:none;
		}
		th,td{
			border:solid 1px #dff0d8;
		}
	}
	.tr_info{
		font-size:12px;
		background: #31b0d5;
		border:solid 1px #31b0d5;
		color:#fff;
		th{
			border-bottom:none;
		}
		th,td{
			border:solid 1px #d9edf7;
		}
	}
}
    .comm_content_top {
        border-bottom:none;
    }
    .system{
        li{
            display:inline-block; 
        }  
        .h1_title{
            font-size:16px;
            font-weight:bold;
            margin:15px 0;
            padding-top:15px;
            border-top:solid 1px #ddd;
        }
        .table_title{
            font-size:16px;
            background:#eb9316;
            color:#fff;
            border:solid 1px #eb9316;
            td{
               border:solid 1px #eb9316; 
            }
        }
    }
    .content{
        .caozuo-icon{
            .icon{
                font-size:12px;
                cursor:pointer;
                padding:3px 4px;
                color:#fff;
                display:none;
            }
            .icon-err{
                background: #c9302c;
            }
            .icon-succ{
                background: #449d44;
            }
            .icon-upadate{
                color:#fff;
                background: #428bca;
            }
        }
        .table{
            margin-bottom:0;
        }
        .no-bor{
            border:none;
            td{
                border-top:none;
            }
        }
        .nouse{
            color:#c9302c;
            em{
                text-decoration:line-through;
            }
        }
        label{
            font-weight:300;
            font-size:13px;
        }
        
    }
    /* table.table-event:nth-child(odd){
        background: #efe8e8
    } */
    .system-active{
        background-color:skyblue
    }
    .b-5{width:5%!important}
.b-8{width:8.333%!important}
.b-10{width:10%!important}
.b-15{width:15%!important}
.b-18{width:18%!important}
.b-20{width:20%!important}
.b-25{width:25%!important}
.b-30{width:30%!important}
</style>

<template>
<div class="container-fluid">
    <div class="row comm_conent_padding">
        <!-- 系统列表 -->
        <div class="system">
            <!-- <h1 class="h1_title">选择系统</h1> -->
            <!-- <ul>
                <li v-for="(item,i) in sysDataList" class="userSelect mb5" > 
                    <label for="" class="btn btn-default br3 mr10" :class="{'system-active':item.systemCode==isActive}" @click="selectSystem(item)">
                        <el-input :checked="item.isHave?true:false" type="checkbox" disabled></el-input><span class="ml5">{{item.systemName}}</span>
                    </label>
                </li>
            </ul> -->

            <!-- main -->
            <!-- <h1 class="h1_title">勾选权限列表</h1> -->
<!--             <div class="select_system">
                <label class="mr20" @click="allSelled"><el-input class="mr10" v-model="isAllOpen" type="checkbox"><span>展开全部系统</span></label>
                <button class="btn btn-danger" @click="submitUserQuanXian">保存权限</button>
            </div> -->
            <!-- 保存按钮 -->
            <div class="table-responsive content">
                <!-- 循环 -->
                <div v-for="(items,i) in itemList" v-show='items.key==isActive'>
                    <table class="table table-bordered mt20 table_title cursor" @click="slideTwice(items)">
                        <tbody>
                            <tr>
                                <td colspan="3">
                                    <span>{{items.name}}</span>
                                    <!-- <span class="bigiconfont cursor itouch float-right" 
                                                            >{{items.isOpen?'&#xe61c;':'&#xe60f;'}}</span> -->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div :class="{'hide':!items.isOpen}">
                        <table class="table table-bordered">
                            <tbody>
                                <tr class="userSelect">
                                    <th class="b-18">
                                        <span>栏目</span>
                                        <label class="ml10">
                                            <input :checked="items.isAllLanMu?true:false" v-model="items.isAllLanMu" @click="selectAllLanMu($event,items.key)"
                                                type="checkbox">全选
                                        </label>
                                    </th>
                                    <th class="b-18">
                                        <span>模块</span>
                                        <label class="ml10">
                                            <input :checked="items.isAllMoKuai?true:false" v-model="items.isAllMoKuai" @click="selectAllMoKuai($event,items.key)"
                                                type="checkbox">全选
                                        </label>
                                    </th>
                                    <th>
                                        <span>功能</span>
                                        <label class="ml10">
                                            <input :checked="items.isAllGongNeng?true:false" v-model="items.isAllGongNeng" @click="selectAllGongNeng($event,items.key)"
                                                type="checkbox">全选
                                        </label>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered no-bor table-event" v-for="(item,i) in items.val">
                            <tbody>
                                <tr v-for="(item1,index) in item.modeList">
                                    <td class="b-18" v-if="index==0" :rowspan="item.modeList.length">
                                        <label v-if="item.groupInfo.isUse">
                                            <input type="checkbox" :checked="item.isHave?true:false" @click="selectLanMu(item,items)">
                                            <span>{{item.groupInfo.groupName+'('+item.groupInfo.groupCode+')'}}</span>
                                        </label>
                                    </td>
                                    <td class="b-18">
                                        <label v-if="item1.modeInfo.isUse">
                                            <input type="checkbox" :checked="item1.isHave?true:false" @click="selectMoKuai(item1,items)">
                                            <span>{{item1.modeInfo.modeName+'('+item1.modeInfo.modeCode+')'}}</span>
                                        </label>
                                    </td>
                                    <td>
                                        <div class="col-sm-3 caozuo-icon" v-for="(item2,i2) in item1.methodList">
                                            <label v-if="item2.methodInfo.isUse">
                                                <input type="checkbox" :checked="item2.isHave?true:false" @click="selectGongNeng(item2,items)">
                                                <span>{{item2.methodInfo.methodName+'('+item2.methodInfo.methodCode+')'}}</span>
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 保存按钮 -->
                <div class="mt20 mb30 tc">
                    <el-button type="danger" class="btn btn-danger" @click="submitUserQuanXian">保存权限</el-button>
                    <el-button type="default" onclick="window.history.go(-1)" class="btn btn-default">取消</el-button>
                </div>
            </div>

        </div>

    </div>
</div>
</template>

<script>
    export default {
        components: {
        },
        data(){
            return {
                sysDataList:[], //所有系统列表数据
                itemList:[],
                submitDatas:{
                    groupJson:[],
                    modeJson:[],
                    methodJson:[]
                },
                // isAllOpen:true,
                isActive:'bookmall',//显示的系统
            }
        },
        created(){
            // 系统列表
            this.getPostAccess();
        },
        methods: {
            //获得对应系统对应职位的权限列表（包含是否拥有，isHave>0代表已拥有）
            getPostAccess(item){
                var item = {
                    systemCode:'bookmall',
                    systemName:'权限分配',
                };
                var This=this;
                util.ajax({
                    url:config.baseApi+'bookMall-admin/api/admin/getPostAccess',
                    data:{
                        systemCode:item.systemCode,
                        postId:this.$route.query.postId,
                    },
                    success:function(data){
                        var json=This.isAllSelect(data.data);
                        This.itemList = [{
                            isAllLanMu:json.isAllLanMu,
                            isAllMoKuai:json.isAllMoKuai,
                            isAllGongNeng:json.isAllGongNeng,
                            name:item.systemName,
                            key:item.systemCode,
                            isOpen:true,
                            val:data.data
                        }];
                    }
                })
            },
            // 全选栏目
            selectAllLanMu($event,key){
                var isIns=util.isInArrayAndIndex(this.itemList,key,'key');
                var datas=this.itemList[isIns.index]['val']
                // 设置全选与否
                if($event.target.checked){
                    for(var i=0,len=datas.length;i<len;i++){
                        datas[i]['isHave']=1
                    }
                }else{
                    for(var i=0,len=datas.length;i<len;i++){
                        datas[i]['isHave']=0
                    }
                }
            },
            //全选模块
            selectAllMoKuai($event,key){
                var isIns=util.isInArrayAndIndex(this.itemList,key,'key');
                var datas=this.itemList[isIns.index]['val']
                // 设置全选与否
                if($event.target.checked){
                    for(var i=0,len=datas.length;i<len;i++){
                        if(datas[i]['modeList']&&datas[i]['modeList'].length){
                            for(var k=0;k<datas[i]['modeList'].length;k++){
                                datas[i]['modeList'][k]['isHave']=1
                            }
                        }; //if 结束
                    }
                }else{
                    for(var i=0,len=datas.length;i<len;i++){
                        if(datas[i]['modeList']&&datas[i]['modeList'].length){
                            for(var k=0;k<datas[i]['modeList'].length;k++){
                                datas[i]['modeList'][k]['isHave']=0
                            }
                        }; //if 结束
                    }
                }
            },
            // 全选功能
            selectAllGongNeng($event,key){
                var isIns=util.isInArrayAndIndex(this.itemList,key,'key');
                var datas=this.itemList[isIns.index]['val']
                // 设置全选与否
                if($event.target.checked){
                    for(var i=0,len=datas.length;i<len;i++){
                        for(var k=0;k<datas[i]['modeList'].length;k++){
                            if(datas[i]['modeList'][k]['methodList']&&datas[i]['modeList'][k]['methodList'].length){
                                for(var j=0;j<datas[i]['modeList'][k]['methodList'].length;j++){
                                    datas[i]['modeList'][k]['methodList'][j]['isHave']=1
                                }
                            }; //if 结束
                        }
                    }
                }else{
                    for(var i=0,len=datas.length;i<len;i++){
                        for(var k=0;k<datas[i]['modeList'].length;k++){
                            if(datas[i]['modeList'][k]['methodList']&&datas[i]['modeList'][k]['methodList'].length){
                                for(var j=0;j<datas[i]['modeList'][k]['methodList'].length;j++){
                                    datas[i]['modeList'][k]['methodList'][j]['isHave']=0
                                }
                            }; //if 结束
                        }
                    }
                }
            },
            // 选择单个栏目
            selectLanMu(item,itemDatas){
                item.isHave=item.isHave?0:1;
                if(item.isHave){
                    this.setModelSomeData(item.modeList,'isHave',1)
                }else{
                    this.setModelSomeData(item.modeList,'isHave',0)
                };
                var json=this.isAllSelect(itemDatas['val'])
                itemDatas['isAllLanMu']=json.isAllLanMu
                itemDatas['isAllMoKuai']=json.isAllMoKuai
                itemDatas['isAllGongNeng']=json.isAllGongNeng
            },
            // 选择单个模块
            selectMoKuai(item,itemDatas){
                item.isHave=item.isHave?0:1;
                if(item.isHave){
                    this.setModelSomeData(item.methodList,'isHave',1)
                }else{
                    this.setModelSomeData(item.methodList,'isHave',0)
                };
                var json=this.isAllSelect(itemDatas['val'])
                itemDatas['isAllMoKuai']=json.isAllMoKuai
                itemDatas['isAllGongNeng']=json.isAllGongNeng
            },
            // 选择单个功能
            selectGongNeng(item,itemDatas){
                item.isHave=item.isHave?0:1;
                var json=this.isAllSelect(itemDatas['val'])
                itemDatas['isAllGongNeng']=json.isAllGongNeng
            },
            // 设置所有模块的值
            setModelSomeData(arr,key,value){
                if(!arr.length) return;
                arr.forEach(((val,index)=>{
                    val[key]=value;
                    val.methodList&&val.methodList.length&&val.methodList.forEach(((val1,index1)=>{
                        val1[key]=value;
                    }));
                }));
            },
            //检测是否全选
            isAllSelect(dataList){
                var json={
                    isAllLanMu:true,
                    isAllMoKuai:true,
                    isAllGongNeng:true
                }
                for(var k=0;k<dataList.length;k++){
                    // 添加栏目
                    if(!dataList[k]['isHave']){
                        json.isAllLanMu = false;  
                    };
                    // 添加模块
                    for(var j=0;j<dataList[k]['modeList'].length;j++){
                        if(!dataList[k]['modeList'][j]['isHave']){
                            json.isAllMoKuai = false;  
                        }
                        // 添加方法
                        if(dataList[k]['modeList'][j]['methodList']){
                            for(var o=0;o<dataList[k]['modeList'][j]['methodList'].length;o++){
                                if(!dataList[k]['modeList'][j]['methodList'][o]['isHave']){
                                    json.isAllGongNeng = false; 
                                }
                            }
                        }
                    }
                }
                return json;
            },
            // 切换
            // slideTwice(items){
            //    items.isOpen=!items.isOpen;
            //    for(var i=0,len=this.itemList.length;i<len;i++){
            //         if(!this.itemList[i].isOpen){
            //             this.isAllOpen=false;
            //             return;
            //         }else{
            //             this.isAllOpen=true;
            //         }
            //    }
            // },
            // 全部切换
            // allSelled(){
            //     if(this.isAllOpen){
            //         for(var i=0,len=this.itemList.length;i<len;i++){
            //             this.itemList[i].isOpen=false;
            //         }
            //     }else{
            //         for(var i=0,len=this.itemList.length;i<len;i++){
            //             this.itemList[i].isOpen=true;
            //         }
            //     }
            // },
            // 保存用户权限
            submitUserQuanXian(){
                var This=this;
                this.submitDatas['groupJson']=[];
                this.submitDatas['modeJson']=[];
                this.submitDatas['methodJson']=[];
                for(var i=0;i<this.itemList.length;i++){
                    for(var k=0;k<this.itemList[i]['val'].length;k++){
                        // 添加栏目
                        if(this.itemList[i]['val'][k]['isHave']){
                            this.submitDatas['groupJson'].push({
                                accessCode:this.itemList[i]['val'][k]['groupInfo']['groupCode'],
                                systemCode:this.itemList[i]['key']
                            })
                        };
                        // 添加模块
                        if(this.itemList[i]['val'][k]['modeList']&&this.itemList[i]['val'][k]['modeList'].length){
                            for(var j=0;j<this.itemList[i]['val'][k]['modeList'].length;j++){
                                if(this.itemList[i]['val'][k]['modeList'][j]['isHave']){
                                    this.submitDatas['modeJson'].push({
                                        accessCode:this.itemList[i]['val'][k]['modeList'][j]['modeInfo']['modeCode'],
                                        systemCode:this.itemList[i]['key']
                                    })
                                }
                                // 添加方法
                                if(this.itemList[i]['val'][k]['modeList'][j]['methodList']&&this.itemList[i]['val'][k]['modeList'][j]['methodList'].length){
                                    for(var o=0;o<this.itemList[i]['val'][k]['modeList'][j]['methodList'].length;o++){
                                        if(this.itemList[i]['val'][k]['modeList'][j]['methodList'][o]['isHave']){
                                            this.submitDatas['methodJson'].push({
                                                accessCode:this.itemList[i]['val'][k]['modeList'][j]['methodList'][o]['methodInfo']['methodCode'],
                                                systemCode:this.itemList[i]['key']
                                            })
                                        }
                                    }
                                }
                            }
                        }; //if结束
                    }
                }

                util.ajax({
                    url:config.baseApi+'bookMall-admin/api/admin/addPostAccess',
                    data:{
                       postId:this.$route.query.postId,
                       groupJson:JSON.stringify(this.submitDatas['groupJson']),
                       modeJson:JSON.stringify(this.submitDatas['modeJson']),
                       methodJson:JSON.stringify(this.submitDatas['methodJson'])
                    },
                    success(data){
                        This.getPostAccess();
                        popup.miss({content:'操作成功!'})
                    }
                })
            },


        }
    }
</script>


